<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录/注册</title>

    <link rel="stylesheet" href="loginframe.css">
</head>
<body>
    
   <div class="container">

       <!-- 短信登录/注册，密码登录部分总体分成三个部分
        1：切换菜单
        2：表单部分
        3：下面那个第三方登录部分
        
      -->
       <div class="login ">

         
         <!--第一部分： 切换菜单 -->
         <div class="switch-menu clearfix">

           <span class="left ">短信登录/注册</span>

           <!-- 给它添加一个.selected的内样式，实现选中的样式 -->
           <span class="right selected">密码登录</span>

         </div>
  

          <!--第二部分： 表单部分 -->
         <form action="" class="form ">
  
          <!-- 短信登录/注册表单  这里先利用.hidden样式进行隐藏-->
         <div class="hidden">

            <div class="form-item ">

            <p class="txt">

               登录注册表示同意
               <a href="">豆瓣使用协议，隐私政策</a>

            </p>

            </div>

            <div class="form-item">

              <!--maxlength: 设置最多能输入多少个字符。 -->
             <input maxlength="18" type="text" placeholder="手机号" class="more-text-indent">

             <div class="country-code">

              <div class="selected">

               +86

              </div>


              <div class="choose-area ">

               <div class="center">

               <div class="title">

               选择国际区号

               </div>

               <ul>
                 <li class="clearfix selected2">
                   <span class="left">中国</span>
                   <span class="left iconfont iconiconfront-"></span>
                   <span class="right">+1</span>
                 
                
                </li>
                 <li class="clearfix"><span class="left">中国香港</span><span class="right">+2</span></li>
                 <li class="clearfix"><span class="left">澳门地域</span><span class="right">+3</span></li>
                 <li class="clearfix"><span class="left">台湾</span><span class="right">+4</span></li>
                 <li class="clearfix"><span class="left">英国</span><span class="right">+5</span></li>
                 <li class="clearfix"><span class="left">美国</span><span class="right">+6</span></li>
                 <li class="clearfix"><span class="left">日本</span><span class="right">+7</span></li>
                 <li class="clearfix"><span class="left">法国</span><span class="right">+8</span></li>
                 <li class="clearfix"><span class="left">俄国</span><span class="right">+9</span></li>
                 <li class="clearfix"><span class="left">印度</span><span class="right">+10</span></li>
                 <li class="clearfix"><span class="left">阿拉伯</span><span class="right">+11</span></li>
                 <li class="clearfix"><span class="left">国家民12</span><span class="right">+12</span></li>
                 <li class="clearfix"><span class="left">国家民13</span><span class="right">+13</span></li>
                 <li class="clearfix"><span class="left">国家民14</span><span class="right">+14</span></li>
                 <li class="clearfix"><span class="left">国家民15</span><span class="right">+15</span></li>
                 <li class="clearfix"><span class="left">国家民16</span><span class="right">+16</span></li>
                 <li class="clearfix"><span class="left">国家民17</span><span class="right">+17</span></li>
                 <li class="clearfix"><span class="left">国家民18</span><span class="right">+18</span></li>
                 <li class="clearfix"><span class="left">国家民19</span><span class="right">+19</span></li>
                 <li class="clearfix"><span class="left">国家民20</span><span class="right">+20</span></li>
                 <li class="clearfix"><span class="left">国家民21</span><span class="right">+21</span></li>
                 <li class="clearfix"><span class="left">国家民22</span><span class="right">+22</span></li>
                 <li class="clearfix"><span class="left">国家民23</span><span class="right">+23</span></li>
                 <li class="clearfix"><span class="left">国家民24</span><span class="right">+24</span></li>
                 <li class="clearfix"><span class="left">国家民25</span><span class="right">+25</span></li>
                 <li class="clearfix"><span class="left">国家民26</span><span class="right">+26</span></li>
                 <li class="clearfix"><span class="left">国家民27</span><span class="right">+27</span></li>
                 <li class="clearfix"><span class="left">国家民28</span><span class="right">+28</span></li>
                 <li class="clearfix"><span class="left">国家民29</span><span class="right">+29</span></li>
                 <li class="clearfix"><span class="left">国家民30</span><span class="right">+30</span></li>
                 <li class="clearfix"><span class="left">国家民31</span><span class="right">+31</span></li>
                 <li class="clearfix"><span class="left">国家民32</span><span class="right">+32</span></li>
                 <li class="clearfix"><span class="left">国家民33</span><span class="right">+33</span></li>
                 <li class="clearfix"><span class="left">国家民34</span><span class="right">+34</span></li>
                 <li class="clearfix"><span class="left">国家民35</span><span class="right">+35</span></li>
                 <li class="clearfix"><span class="left">国家民36</span><span class="right">+36</span></li>
                 <li class="clearfix"><span class="left">国家民37</span><span class="right">+37</span></li>
                 <li class="clearfix"><span class="left">国家民38</span><span class="right">+38</span></li>
                 <li class="clearfix"><span class="left">国家民39</span><span class="right">+39</span></li>
                 <li class="clearfix"><span class="left">国家民40</span><span class="right">+40</span></li>
                 <li class="clearfix"><span class="left">国家民41</span><span class="right">+41</span></li>
                 <li class="clearfix"><span class="left">国家民42</span><span class="right">+42</span></li>
                 <li class="clearfix"><span class="left">国家民43</span><span class="right">+43</span></li>
                 <li class="clearfix"><span class="left">国家民44</span><span class="right">+44</span></li>
                 <li class="clearfix"><span class="left">国家民45</span><span class="right">+45</span></li>
                 <li class="clearfix"><span class="left">国家民46</span><span class="right">+46</span></li>
                 <li class="clearfix"><span class="left">国家民47</span><span class="right">+47</span></li>
                 <li class="clearfix"><span class="left">国家民48</span><span class="right">+48</span></li>
                 <li class="clearfix"><span class="left">国家民49</span><span class="right">+49</span></li>
                 <li class="clearfix"><span class="left">国家民50</span><span class="right">+50</span></li>
               </ul>

               </div>

              </div>

             </div>

            </div>

            <div class="form-item">

              <input type="text" placeholder="验证码" maxlength="10">

              <a href="" class="ab-right">

                获取验证码

              </a>

             </div>

             <div class="form-item">

               <button class="btn">登录豆瓣</button>
               
             </div>

             <div class="form-item clearfix tip">

               <label for="" class="left">

                <input type="checkbox" >下次自动登录

               </label>

              <span class="right">

               <a href="">收不到验证码</a>

              </span>

             </div>

        </div>


           <!-- 密码登录表单 -->
        <div  class="choose-area ">

            <div class="form-item tip clearfix">

               <a href="" class="right">找回密码</a>

            </div>

            <div class="form-item">

              <input type="text" placeholder="手机号/邮箱">

            </div>

            <div class="form-item">

                <input type="password" placeholder="密码">
  
              </div>

              <div class="form-item">

                <!-- 设置按钮无法使用状态只需要设置属性disabled就可以了 -->
                  <button  class="btn">登录豆瓣</button>
                  
                </div>

                <div class="form-item clearfix tip">

                    <label for="" class="left">
     
                     <input type="checkbox" >下次自动登录
     
                    </label>
     
                   <span class="right">
     
                    <a href="" class="haiwai">海外手机登录</a>
     
                   </span>
     
                  </div>  



       </div>
             
         </form>


         <!-- 第三部分即下面那个第三方登录的部分 -->
         <div class="bottom">

          <span class="msg">第三方登录</span>

          <i class="iconfont weixin iconweixindenglu"></i>

          <i class="iconfont weibo iconweibo"></i>
  
         </div>

       </div>



       <!-- 扫码登录部分，就是那个二维码的 -->
       <div class="qrcode hidden">

         <div class="title">
          二维码登录
         </div>

         <div class="code">

          <img src="./img/qrcode.png" alt="">

         </div>

         <div class="tip">
         请打开豆瓣客户端扫一扫
         </div>
         
       </div>


        <!-- 最上面的那个靠右边的那两个图标。 -->
       <div class="change">
        <!-- 这里用js通过类名切换图标 -->
        <!-- <i class="icon icon-code"></i> -->
        <i class="icon icon-pc"></i>
       </div>


       <div class="pointer">

        扫码登录

       </div>

   </div>

</body>
</html>